<template>
    <div class="kan-ban-detail" v-if="myValue['kanBanDetailData']">
        <div class="list">
            <div class="list-title">司机信息</div>
            <el-row class="list-content">
                <el-col :span="24" class="lie">
                    <el-col :span="5">
                        <div class="title">姓名:<span class="des paddle6">{{myValue['kanBanDetailData'].user?myValue['kanBanDetailData'].user.name:''}}</span></div>
                    </el-col>
                    <el-col :span="6">
                        <div class="title">电话:<span class="des paddle6">{{myValue['kanBanDetailData'].user?myValue['kanBanDetailData'].user.phone:''}}</span></div>
                    </el-col>
                    <el-col :span="5">
                        <div class="title">城市:<span class="des paddle6">北京</span></div>
                    </el-col>
                </el-col>
                <el-col :span="24" class="lie">
                    <el-col :span="5">
                        <div class="title">工作天数:<span class="des paddle6">322</span></div>
                    </el-col>
                    <el-col :span="6">
                        <div class="title">完成任务数:<span class="des paddle6">88</span></div>
                    </el-col>
                    <el-col :span="5">
                        <div class="title">完成运单数:<span class="des paddle6">33</span></div>
                    </el-col>
                    <el-col :span="5">
                        <div class="title">日均单数:<span class="des paddle6">33</span></div>
                    </el-col>
                    <el-col :span="3">
                        <div class="color1989FA">查看图表</div>
                    </el-col>
                </el-col>
                <el-col :span="24" class="lie">
                    <el-col :span="5">
                        <div class="title">好评率:<span class="des paddle6">99%</span></div>
                    </el-col>
                    <el-col :span="6">
                        <div class="title">综合评分:<span class="des paddle6">4.9</span></div>
                    </el-col>
                    <el-col :span="5">
                        <div class="title">等级:<span class="des paddle6">城市之英</span></div>
                    </el-col>
                    <el-col :span="5">
                        <div class="color1989FA">更多</div>
                    </el-col>
                </el-col>
            </el-row>
        </div>
        <div class="list">
            <!--<div class="list-title">轨迹查看</div>-->
            <!--<el-row class="list-content">-->
                <!--<el-col :span="24"  class="lie">-->
                    <!--<el-col :span="10" style="display: flex;">-->
                        <!--<div class="labels">日期</div>-->
                        <!--<el-date-picker-->
                                <!--v-model="dateValue"-->
                                <!--type="date"-->
                                <!--placeholder="选择日期"-->
                                <!--style="width: 200px;">-->
                        <!--</el-date-picker>-->
                    <!--</el-col>-->
                    <!--<el-col :span="12">-->
                        <!--<span class="labels">具体任务</span>-->
                        <!--<el-select v-model="task" placeholder="选择任务" style="width: 160px;">-->
                            <!--<el-option-->
                                    <!--v-for="item in options"-->
                                    <!--:key="item.value"-->
                                    <!--:label="item.label"-->
                                    <!--:value="item.value">-->
                            <!--</el-option>-->
                        <!--</el-select>-->
                    <!--</el-col>-->
                <!--</el-col>-->
                <!--<el-col :span="24" class="lie">-->
                    <!--<div class="map"></div>-->
                <!--</el-col>-->
            <!--</el-row>-->
        </div>
        <div class="list">
            <div class="list-title"><span>扣分详情</span><span class="color1989FA">更多</span></div>
            <el-row class="list-content">
                <el-col :span="24" class="lie">
                    <el-col :span="4">
                        <div class="title">相关单号:</div>
                    </el-col>
                    <el-col :span="5">
                        <div class="title">7100-123456</div>
                    </el-col>
                    <el-col :span="5">
                        <div class="title">12/17 11:35</div>
                    </el-col>
                    <el-col :span="5">
                        <div class="title">超时联系客户</div>
                    </el-col>
                    <el-col :span="5">
                        <div class="colorF12F1D">扣6分</div>
                    </el-col>
                </el-col>
            </el-row>
        </div>
        <div class="list">
            <div class="list-title"><span>客户评价</span><span class="color1989FA">更多</span></div>
            <el-row class="list-content">
                <el-col :span="24" class="lie">
                    <el-col :span="4">
                        <div class="title">12-18 14:04</div>
                    </el-col>
                    <el-col :span="5">
                        <div class="title">[91dml-1234567]</div>
                    </el-col>
                    <el-col :span="8">
                        <div class="title">师傅很负责</div>
                    </el-col>
                    <el-col :span="4">
                        <div class="title">4.5星</div>
                    </el-col>
                </el-col>
            </el-row>
        </div>
        <div class="list">
            <div class="list-title">任务</div>
            <div class="list-content">
                <div  class="lie">
                    <div style="display: flex;">
                        <div class="labels">查看日期</div>
                        <!--<el-date-picker-->
                                <!--v-model="myValue.date"-->
                                <!--type="date"-->
                                <!--placeholder="选择日期"-->

                                <!--style="width: 200px;">-->
                        <!--</el-date-picker>-->
                        <lar-field-date
                            v-model="myValue.date"
                            :action="'edit'"
                        ></lar-field-date>
                    </div>
                </div>
                <div style="margin-top: 12px" class="task-box">
                    <div class="task-list">
                        <div class="task-list-top">
                            <div class="task-list-top-first">
                                <span>时间: <span>12-18 14:30</span></span>
                                <span>
                                    <span style="padding-right: 6px;color: #1989FA;">取<span>&#10005;</span> <span class="box-top-num">30</span></span>
                                    <span  style="color: #1989FA;">送<span>&#10005;</span> <span class="box-top-num">30</span></span>
                                </span>
                            </div>
                            <div class="task-list-top-second">
                                <div style="padding: 10px 0">
                                    <span class="box-center-name">江燕</span>
                                    <span class="box-center-email">收件人</span>
                                    <span class="box-center-phone">19420441735</span>
                                </div>
                                <div class="address">北京市朝阳区光华路2号阳光100国际公寓G座(近大望路地铁站)</div>
                            </div>
                            <div class="task-status">任务已完成</div>
                        </div>
                        <div class="task-order">
                            <div class="task-order-list">
                                <span class="task-order-list-name">识别码:</span>
                                <span class="task-order-list-code">DML220123456-1</span>
                            </div><div class="task-order-list">
                                <span class="task-order-list-name">识别码:</span>
                                <span class="task-order-list-code">DML220123456-1</span>
                            </div><div class="task-order-list">
                                <span class="task-order-list-name">识别码:</span>
                                <span class="task-order-list-code">DML220123456-1</span>
                            </div><div class="task-order-list">
                                <span class="task-order-list-name">识别码:</span>
                                <span class="task-order-list-code">DML220123456-1</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'kan-ban-info',
        components: {
        },
        props: {
            value: {
                type: Object,
                default: ()=>{
                    return {}
                }
            }
        },
        data() {
            return {
                dateValue:'',
                checkDate:'',
                options: [
                    {
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                task:'',
                myValue: {}
            }
        },
        watch: {
            value: function (val) {
                this.myValue = this.value;
            },
            myValue: function (val) {
                this.$emit('input',this.myValue);
            }
        },
        // computed: {
        //     kanBanDetailData: function (value) {
        //         return this.kanBanDetail;
        //     }
        // },
        mounted() {
            this.myValue = this.value;
        },
        methods: {
        }
    }
</script>

<style scoped lang="less">
.kan-ban-detail{
    padding: 0px 39px 30px 35px;
    .paddle6{
        padding-left: 6px;
    }
    .textcent{
        text-align: center;
    }
    .colorF12F1D{
        color: #F12F1D;
    }
    .color1989FA{
        color: #1989FA;
    }
    .color1989FA:hover{
        text-decoration: underline;
        cursor: pointer;
    }
    .list{
        padding-top: 32px;
        .list-title{
            font-size:16px;
            line-height:22px;
            color: #000;
            display: flex;
            justify-content: space-between;
        }
        .list-content{
            color: #757575;
            .lie{
                padding-top: 12px;
                .title{
                    font-size:14px;
                    line-height:20px;
                }
                .des{
                    font-size:14px;
                    line-height:20px;
                }

                .map{
                    width:100%;
                    height:247px;
                    background-color: #eee;
                }
                .table-title{
                    padding-bottom: 12px;
                    line-height: 20px;
                }
                .labels{
                    line-height: 42px;
                    padding-right: 8px;
                }
            }
            .task-box::-webkit-scrollbar{
                height: 8px;
            }
            .task-box{
                width: 760px;
                /*height: 100%;*/
                overflow: auto;
                white-space: nowrap;
                padding: 10px;
                margin-right: 50px;
                .task-list{
                    width:300px;
                    height:310px;
                    margin-right: 16px;
                    margin-bottom: 20px;
                    display: inline-block;
                    background:rgba(255,255,255,1);
                    border-radius:4px;
                    white-space: normal;
                    border:1px solid rgba(188,188,190,1);
                    box-shadow: 0px 0px 10px rgba(188,188,190,1);
                    .task-list-top{
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        width: 100%;
                        height: 159px;
                        border-bottom: 1px solid rgba(188,188,190,1);
                        border-radius:0 0 6px 6px;
                        .task-list-top-first{
                            display: flex;
                            justify-content: space-between;
                            border-bottom: 1px solid #f2f2f2;
                            font-size: 12px;
                            color: #000;
                            padding: 7px 20px 7px 12px;
                            .box-top-num{
                                font-size: 16px;
                                color: #000;
                                padding-left: 5px;
                            }
                        }
                        .task-list-top-second{
                            flex: 1;
                            padding: 0 10px;
                            .address{
                                color: #BCBCBE;
                            }
                            .box-center-name{
                                color: #000;
                                font-weight: 600;
                                padding-right: 4px;
                            }
                            .box-center-email{
                                padding-right: 4px;
                            }
                            .box-center-phone{
                                color: #1989FA;
                            }
                        }
                        .task-status{
                            width: 100%;
                            height: 30px;
                            line-height: 30px;
                            border-top: 1px solid #f2f2f2;
                            font-weight:600;
                            text-align: center;
                            color:rgba(0,0,0,1);
                            font-size: 16px;
                        }
                    }
                    .task-order{
                        height: 150px;
                        padding: 0 12px;
                        overflow-y: scroll;
                        .task-order-list{
                            border-bottom: 1px solid #F2F2F2;
                            padding:16px 0;
                            .task-order-list-name{
                                color: #9B9B9B;
                            }
                            .task-order-list-code{
                                color: #000;
                                padding-left: 4px;
                            }
                        }
                    }
                }
            }



        }
    }
}
</style>

